<template>
  <!--  <HeaderDetail />-->
  <div style="margin: 10px 6% 0 6%">
    <el-row>
      <el-card class="box-card">
        <!-- <el-card class="box-card" style="margin-top: 10px; width: 99%"> -->
        <template #header>
          <div class="card-header">
            <span class="search-card-title">Sequence Design</span>
          </div>
        </template>
        <el-row>
          <el-col :span="8">
            <!--<span>Sequence Assemble:</span>-->
            <el-select
              v-model="compound"
              multiple
              style="width: 95%"
              placeholder="Select Category"
            >
              <el-option
                v-for="items in options"
                :key="items.value"
                :label="items.label"
                :value="items.value"
              />
            </el-select>
          </el-col>
          <el-col :span="4" style="position: relative">
            <el-button type="primary" @click="getPlot(compound), initialData(compound)"
              >SELECT</el-button
            >
            <el-button
              type="success"
              @click="(dialogVisible = true)"
              >ASSEMBLE</el-button
            >
          </el-col>
        </el-row>
        <div v-if="geneList.length !== 0" style="margin-top: 5px">
          <transition-group class="container" name="sort">
            <div
              class="app-item"
              style="padding-bottom: 10px"
              v-for="item in dragList"
              :key="item.id"
              :draggable="true"
              @dragstart="dragstart(dragList, item)"
              @dragenter="dragenter(dragList, item, $event)"
              @dragend="getDragend(dragList, 'customer', $event)"
            >
              <div>
                <div class="ellipsis">{{ item }}</div>
              </div>
            </div>
          </transition-group>
          <el-tabs v-model="geneValue" type="border-card">
            <el-tab-pane
              v-for="item in geneList"
              :key="item.name"
              :label="item.name"
              :value="item.name"
            >
              <el-tag
                v-for="(tag, index) in dataArray"
                :key="index"
                class="mx-1"
                closable
                style="margin: 0 2px 5px"
                @close="handleRemove(tag)"
              >
                {{ tag }}
              </el-tag>
              <div>
                <el-input
                  v-model="search"
                  size="small"
                  placeholder="Filter"
                  style="width: 300px; padding-bottom: 5px"
                  :suffix-icon="Search"
                />
              </div>
              <!-- :data="
                    tableData.filter(
                      (data) =>
                        !search ||
                        data.name.toLowerCase().includes(search.toLowerCase())
                    )
                  " -->
              <el-table
                ref="multipleTable"
                :data="tableData"
                border
                style="width: 100%"
                :row-style="rowStyle"
                @selection-change="handleSelectionChange"
              >
                <el-table-column type="selection" width="40" />
                <el-table-column property="name" label="Seq Name" width="100" />
                <el-table-column
                  property="des"
                  label="Description"
                  width="200"
                />
                <el-table-column
                  property="protein"
                  label="Protein Sequence"
                  width="300"
                />
                <el-table-column property="dna" label="DNA Sequence" />
              </el-table>
              <el-pagination
                v-model:currentPage="currentPage"
                v-model:page-size="pageSize"
                :page-sizes="[30, 50, 100, 300]"
                layout="total, sizes, prev, pager, next"
                :total="7"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
              <!--</div>-->
            </el-tab-pane>
          </el-tabs>
        </div>
        <!-- </el-card> -->
      </el-card>
    </el-row>
  </div>

  <el-dialog v-model="dialogVisible" title="Sequence Assemble">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span class="card-title">Assemble Result</span>
          <el-col
            :span="12"
            :offset="2"
            style="text-align: end; padding-right: 10px"
          >
            <el-button type="warning" @click="handleClose(dataArray1)"
              >SAVE</el-button
            >
          </el-col>
        </div>
      </template>
      <!--<div>
        <el-input
          v-model="search"
          size="small"
          placeholder="Filter"
          style="width: 300px; padding-bottom: 5px"
          :suffix-icon="Search"
        />
      </div>-->
      <!--         :data="
          assembleTable.filter(
            (data) =>
              !search || data.name.toLowerCase().includes(search.toLowerCase())
          )
        " -->
      <el-table
        :data="assembleTable"
        border
        row-key="name"
        indent="0"
        style="width: 100%; margin-bottom: 5px"
        @selection-change="handleSelectionChange1"
      >
        <el-table-column type="selection" width="40" />
        <!--           <template #default="scope">
            <el-checkbox v-model="scope.row.isCheck" />
          </template>
        </el-table-column> -->

        <el-table-column fixed label="Components" width="120">
          <template #default="scope">{{ scope.row.seqname }}</template>
        </el-table-column>
        <el-table-column
          property="asmprotein"
          label="Protein Sequence"
          width="300"
          show-overflow-tooltip
        />
        <el-table-column
          property="asmDNA"
          label="DNA Sequence"
          show-overflow-tooltip
        />
      </el-table>

      <el-pagination
        v-model:currentPage="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[30, 50, 100, 300]"
        layout="total, sizes, prev, pager, next"
        :total="8"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
  </el-dialog>
</template>

<script >
import { defineComponent, ref, reactive, toRefs, nextTick } from "vue";
import { Download, Select, Pointer, EditPen } from "@element-plus/icons-vue";
import router from "@/router";
export default {
  name: "SequenceDesign",
  components: {
    EditPen,
    Download,
    Select,
    Pointer,
  },

  setup() {
    const dragData = reactive({
      oldData: [],
      newData: [],

      dragList: [0, 1, 2],
      dragStartId: "",
      dragEndId: "",
    });

    function initialData(val) {
      let newItems = [...val];
      dragData.dragList.length = 0;
      dragData.dragList = newItems;
      console.log(val);
    }

    const dragstart = (listData, value) => {
      dragData.oldData = value;
      dragData.dragStartId = listData.indexOf(value) + 1;
    };
    const dragenter = (listData, value) => {
      dragData.newData = value;
      dragData.dragEndId = listData.indexOf(value) + 1;
    };
    /*
     */
    const getDragend = (listData) => {
      //console.log(listData)
      if (dragData.oldData !== dragData.newData) {
        let oldIndex = listData.indexOf(dragData.oldData);
        let newIndex = listData.indexOf(dragData.newData);
        let newItems = [...listData];
        // 在拖拽时删除现有dom节点
        newItems.splice(oldIndex, 1);
        // 松开鼠标后 在根据index 在现有的节点下增加节点
        newItems.splice(newIndex, 0, dragData.oldData);
        // 节点添加完成后将数据重新赋值给dragData中的dragList中
        dragData.dragList = newItems;
        //console.log(dragData.dragList);
        //console.log(newItems);
      }
    };

    const search = ref("");
    let dialogFormVisible = ref(false);
    const assembleTable = reactive([
      {
        seqname: "H1-H2-H3-H6",
        asmprotein: "MELGLSWIFLLAILKGVQCMELGLSWIFLLAILKGVQCMELGLSWIFLLAILKGVQC",
        asmDNA: "ATGGAGCTGGGCCTGAGCTGGATCTTCCTGCTGGCCATCCTGAAGGGCGTGCAGTGC",
          struc: "H1-H2-H3-H6",
      },
      {
        seqname: "H2-H7-H5-H4",
        asmprotein: "MELGLRWVFLVAILEGVQCMELGLRWVFLVAILEGVQCMELGLRWVFLVAILEGVQC",
        asmDNA: "ATGGAGCTGGGCCTGAGATGGGTGTTCCTGGTGGCCATCCTGGAAGGCGTGCAGTGC",
          struc: "H2-H7-H5-H4",
      },
      {
        seqname: "H3-F4-G9-K8",
        asmprotein: "MELGLRWVFLVAILEGVQCMELGLRWVFLVAILEGVQCMELGLRWVFLVAILEGVQC",
        asmDNA: "ATGGAGCTGGGCCTGAGATGGGTGTTCCTGGTGGCCATCCTGGAAGGCGTGCAGTGC",
          struc: "H3-F4-G9-K8",
      },
      {
        seqname: "H3-F4-G9-K8",
        asmprotein: "MELGLRWVFLVAILEGVQCMELGLRWVFLVAILEGVQCMELGLRWVFLVAILEGVQC",
        asmDNA: "ATGGAGCTGGGCCTGAGATGGGTGTTCCTGGTGGCCATCCTGGAAGGCGTGCAGTGC",
          struc: "H3-F4-G9-K8",
      },
      {
        seqname: "H3-F4-G9-K8",
        asmprotein: "MELGLRWVFLVAILEGVQCMELGLRWVFLVAILEGVQCMELGLRWVFLVAILEGVQC",
        asmDNA: "ATGGAGCTGGGCCTGAGATGGGTGTTCCTGGTGGCCATCCTGGAAGGCGTGCAGTGC",
          struc: "H3-F4-G9-K8",
      },
      {
        seqname: "H3-F4-G9-K8",
        asmprotein: "MELGLRWVFLVAILEGVQCMELGLRWVFLVAILEGVQCMELGLRWVFLVAILEGVQC",
        asmDNA: "ATGGAGCTGGGCCTGAGATGGGTGTTCCTGGTGGCCATCCTGGAAGGCGTGCAGTGC",
          struc: "H3-F4-G9-K8",
      },
      {
        seqname: "H3-F4-G9-K8",
        asmprotein: "MELGLRWVFLVAILEGVQCMELGLRWVFLVAILEGVQCMELGLRWVFLVAILEGVQC",
        asmDNA: "ATGGAGCTGGGCCTGAGATGGGTGTTCCTGGTGGCCATCCTGGAAGGCGTGCAGTGC",
          struc: "H3-F4-G9-K8",
      },
      {
        seqname: "H3-F4-G9-K8",
        asmprotein: "MELGLRWVFLVAILEGVQCMELGLRWVFLVAILEGVQCMELGLRWVFLVAILEGVQC",
        asmDNA: "ATGGAGCTGGGCCTGAGATGGGTGTTCCTGGTGGCCATCCTGGAAGGCGTGCAGTGC",
          struc: "H3-F4-G9-K8",
      },
    ]);
    const tableData = reactive([
      {
        name: "H1",
        des: "IL10_HUMAN, Interleukin-10",
        protein: "MELGLSWIFLLAILKGVQC",
        dna: "ATGGAGCTGGGCCTGAGCTGGATCTTCCTGCTGGCCATCCTGAAGGGCGTGCAGTGC",
      },
      {
        name: "H2",
        des: "IL10_HUMAN, Interleukin-10",
        protein: "MELGLRWVFLVAILEGVQC",
        dna: "ATGGAGCTGGGCCTGAGATGGGTGTTCCTGGTGGCCATCCTGGAAGGCGTGCAGTGC",
      },
      {
        name: "H3",
        des: "IL10_HUMAN, Interleukin-10",
        protein: "MELGLRWVFLVAILEGVQC",
        dna: "ATGGAGCTGGGCCTGAGATGGGTGTTCCTGGTGGCCATCCTGGAAGGCGTGCAGTGC",
      },
      {
        name: "H4",
        des: "IL10_HUMAN, Interleukin-10",
        protein: "MELGLRWVFLVAILEGVQC",
        dna: "ATGGAGCTGGGCCTGAGATGGGTGTTCCTGGTGGCCATCCTGGAAGGCGTGCAGTGC",
      },
      {
        name: "H5",
        des: "IL10_HUMAN, Interleukin-10",
        protein: "MELGLRWVFLVAILEGVQC",
        dna: "ATGGAGCTGGGCCTGAGATGGGTGTTCCTGGTGGCCATCCTGGAAGGCGTGCAGTGC",
      },
      {
        name: "H6",
        des: "IL10_HUMAN, Interleukin-10",
        protein: "MELGLRWVFLVAILEGVQC",
        dna: "ATGGAGCTGGGCCTGAGATGGGTGTTCCTGGTGGCCATCCTGGAAGGCGTGCAGTGC",
      },
      {
        name: "IL10",
        des: "IL10_HUMAN, Interleukin-10",
        protein: "MHSSALLCCLVLLTGVRA",
        dna: "ATGCACAGCTCAGCTCTGCTGTGCTGCCTGGTGCTTCTGACCGGCGTGCGGGCC",
      },
    ]);
    let dynamicTags = reactive([
      { type: "", label: "H1" },
      { type: "success", label: "H2" },
      { type: "info", label: "H3" },
      { type: "danger", label: "H4" },
      { type: "warning", label: "H5" },
    ]);
    const checked1 = ref(true);
    const multipleSelection = reactive({});
    const assembleSequence = () => {
      dialogFormVisible.value = true;
    };
    const handleClose = (tag) => {
      dynamicTags.splice(dynamicTags.indexOf(tag), 1);
    };

    const dataArray = reactive([]);
    const handleSelectionChange = (val) => {
      multipleSelection.value = val;
      //每次进入清空数组
      dataArray.length = 0;
      val.forEach((item) => {
        dataArray.push(item.name);
      });
      console.log(dataArray);
    };

    const dataArray1 = reactive([
      {
        seqname: "",
        asmprotein: "",
        asmDNA: "",
      },
    ]);
    const handleSelectionChange1 = (val) => {
      //console.log(val);
      //每次进入清空数组
      dataArray1.length = 0;
      val.forEach((item) => {
        dataArray1.push({
          seqname: item.seqname,
          asmprotein: item.asmprotein,
          asmDNA: item.asmDNA,
        });
      });
      console.log(dataArray1);
    };

    const multipleTable = ref(null);

    const handleRemove = (tag) => {
      //寻找索引值
      let indexRemove = dataArray.indexOf(tag);
      console.log(indexRemove);

      //multipleSelection.value.splice(indexRemove, 1)
      //console.log(multipleSelection.value)
      console.log(multipleTable);

      dataArray.splice(indexRemove, 1);
      console.log(dataArray);
    };

    const goReg = () => {
      router.push("/designLibrary");
    };
    return {
      ...toRefs(dragData),
      dragstart,
      dragenter,
      getDragend,
      initialData,
      handleRemove,

      multipleTable,
      dataArray,
      dataArray1,
      tableData,
      search,
      dialogFormVisible,
      assembleTable,
      dynamicTags,
      checked1,
      multipleSelection,
      assembleSequence,
      handleClose,
      handleSelectionChange,
      handleSelectionChange1,
      goReg,
    };
  },
  data() {
    return {
      dialogVisible: false,
      search: "",
      readonly: true,
      searchInfo: {
        name: "",
        date: "",
        compound: "",
        source: "",
        projectCode: "",
        time: "",
        cell: "",
        note: "",
        peptide: "",
        nucleotides: "",
      },
      compound: [],
      geneValue: "",
      geneList: [],
      currentPage: 1,
      pageSize: 10,
      options: [
        {
          value: "sp",
          label: "sp",
        },
        {
          value: "linker",
          label: "linker",
        },
        {
          value: "2A",
          label: "2A",
        },
        {
          value: "fs",
          label: "fs",
        },
        {
          value: "stop",
          label: "stop",
        },
      ],
      options1: [
        {
          value: "ph",
          label: "VH",
        },
        {
          value: "pl",
          label: "VL",
        },
      ],
      options2: [
        {
          value: "CRO",
          label: "CRO",
        },
        {
          value: "2",
          label: "Internal",
        },
      ],
      options3: [
        {
          value: "CDI",
          label: "CDI",
        },
        {
          value: "PSA",
          label: "PSA",
        },
      ],
    };
  },
  created() {
    this.compound = this.$route.params.gene;
    this.getPlot(this.compound);
  },
  methods: {
    getPlot(compound) {
      if (compound) {
        const geneList = [];
        compound.forEach((item) => {
          geneList.push({
            name: item,
            isCollapse: 1,
          });
        });
        this.geneList = geneList;
      }
    },
    handleSizeChange(val) {
      console.log(`${val} items per page`);
    },
    handleCurrentChange(val) {
      console.log(`current page: ${val}`);
    },
    rowStyle({ row, rowIndex }) {
      const stylejson = {};
      if (row.color) {
        stylejson.background = row.color;
      }
      return stylejson;
    },
    getSequenceID(projectCode, compound) {
      let name = "";
      if (projectCode && compound) {
        name = "RV" + "_" + projectCode + "_" + "p001";
      }
      this.searchInfo.name = name;
    },
    goHistory() {
      window.history.go(-1);
    },
    handleClose(val) {
      this.$router.push({ name: "SequenceSave", params: { selectIn: JSON.stringify(val) } });
    },
  },
};
</script>

<style scoped>
.search-card-title {
  font-size: 16px;
  font-weight: 500;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.download-icon {
  position: relative;
  top: 3px;
  color: #166fe7;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 100%;
}
.el-card /deep/.el-card__header {
  background-color: #64bce7;
  padding: 6px;
}
.el-card /deep/.el-card__body {
  padding: 8px;
}
.ellipsis {
  width: 160px;
  height: 30px;
  line-height: 29px;
  margin-top: 20px;
  margin-right: 10px;
  background: #64bce7;
  transition: transform 1s;
  text-align: center;
}
.app-item {
  display: inline-block !important;
}
</style>
